<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="">货位：</label>
                        <select class="form-control" id="j_huowei">
                            <option v-for="(item,index) in huowei" :value="item.hw">{{item.huowname}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="">收款台：</label>
                        <select class="form-control" id="j_sktid">
                            <option v-for="(item,index) in sktid">{{item.sktid}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="">综合输入</label>
                        <input type="text" class="form-control" placeholder="请输入商品名称、商品编号、流水号、商品条码" v-model="searchMsg">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="equery">查询</button>
                    </div>
                    <div class="btn-group pull-right">
                        <button  type="submit"  class="btn btn-default"  @click="onExport"> 导出表格</button>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="list-h item-hd">
                        <div class="btn-group">
                            <button class="btn" @click="onTab(0)">商品流水</button>
                            <button class="btn" @click="onTab(1)">处方类销售查询</button>
                            <button class="btn" @click="onTab(2)">含麻类销售查询</button>
                        </div>
                    </div>
                    <div class="item-bd">
                        <div class="table-wrap item">
                            <div class="table-box">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th class="tl">流水号</th>
                                            <th class="tl">日期</th>
                                            <th class="tl">时间</th>
                                            <th class="tl">商品编号</th>
                                            <th class="tl">商品名称</th>
                                            <th class="tl">商品规格</th>
                                            <th class="tl">包装单位</th>
                                            <th class="tl">生产厂家</th>
                                            <th class="tl">批号</th>
                                            <th class="tl">有效期至</th>
                                            <th class="tr">数量</th>
                                            <th class="tr">零售价(元)</th>
                                            <th class="tr">应收金额</th>
                                            <th class="tr">单价</th>
                                            <th class="tr">扣率</th>
                                            <th class="tr">实收金额</th>
                                            <th class="tr">金额</th>
                                            <th class="tr">税额</th>
                                            <th class="tr">成本单价</th>
                                            <th class="tr">毛利</th>
                                            <th class="tr">成本金额</th>
                                            <th class="tr">毛利率</th>
                                            <th class="tl">收款员</th>
                                            <th class="tl">部门名称</th>
                                            <th class="tl">销售员</th>
                                            <th class="tl">抹零</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in list">
                                            <!-- <td class="leftB">{{item.yongyfl}}</td> 
                                            <td class="leftB">{{item.djbh}}</td> -->
                                            <td>{{item.lshh}}</td>
                                            <td>{{item.rq}}</td>
                                            <td>{{item.ontime}}</td>
                                            <td>{{item.spbh}}</td>
                                            <td>{{item.spmch}}</td>
                                            <td>{{item.shpgg}}</td>
                                            <td>{{item.dw}}</td>
                                            <td>{{item.shpchd}}</td>
                                            <td>{{item.pihao}}</td>
                                            <td>{{item.sxrq}}</td>
                                            <td class="tr">{{item.shl | formatPrice}}</td>
                                            <td class="tr">{{item.lshj | formatPrice}}</td>
                                            <td class="tr">{{item.ysje | formatPrice}}</td>
                                            <td class="tr">{{item.dj | formatPrice}}</td>
                                            <td class="tr">{{item.koul | formatPrice}}</td>
                                            <td class="tr">{{item.sshje | formatPrice}}</td>
                                            <td class="tr">{{item.je | formatPrice}}</td>
                                            <td>{{item.she | formatPrice}}</td>
                                            <td class="tr">{{item.chbdj | formatPrice}}</td>
                                            <td class="tr">{{item.ml | formatPrice}}</td>
                                            <td class="tr">{{item.chbje | formatPrice}}</td>
                                            <td class="tr">{{item.mll | formatPrice}}%</td>
                                            <td>{{item.shky}}</td>
                                            <td>{{item.bm}}</td>
                                            <td>{{item.xshy}}</td>
                                            <td class="tr">{{item.moling | formatPrice}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="b-balance clearfix has-border">
                                <div class="pull-left">应收金额
                                    <span class="blue">{{summary.ysjehj}}</span>
                                </div>
                                <div class="pull-left">实收金额
                                    <span class="pink">{{summary.sshjehj}}</span>
                                </div>
                                <div class="pull-left">成本合计 {{summary.chbjehj}}</div>
                                <div class="pull-left">抹零合计 {{summary.mlhj}}</div>
                            </div>
                            <div class="pager-box clearfix">
                                <div class="pull-left">共计
                                    <span class="blue">{{count}}</span>条信息 
                                    </div>
                                <div class="pull-right">
                                    <div id="pagenav8" class="tcdPageCode"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import bus from '../api/eventBus';
    import {
        setUi,
        setUserCode,
        setPopStatus
    } from '../vuex/actions'
    import {
        ui,
        userCode,
        popStatus
    } from '../vuex/getters'
    export default {
        components: {},
        data() {
            return {
                sktid: [],
                huowei: [],
                item: 0,
                list: [],
                summary: {},
                row: '',
                count: '',
                searchMsg: '',
                title: '当前交易流水',
                fdbs: '',
                urls: ''
            }
        },
        watch: {},
        vuex: {
            getters: {
                ui,
                userCode,
                popStatus,
            },
            actions: {
                setUi,
                setUserCode,
                setPopStatus
            }
        },
        methods: {
            onTab(num) {
                let me = this;
                me.item = num;
                me.onTableList();
            },
            initial(curr) {
                let me = this;
                me.onTableList();
            },
            equery(e) {
                let me = this;
                me.onTableList();
            },
            onExport(e) {
                let me = this;
                var downloadToken = +new Date();
                var _self = this;
                var url = me.urls + '?sptm=' + me.searchMsg + '&file=' + me.title + '&title=' + me.title + '&fdbs=' + me.fdbs;
                var obj = {
                    time: downloadToken,
                    url: url,
                    _self: _self,
                }
                exportExcelForm(obj);
            },
            onTableList(e) { //查询所有接口
                let me = this;
                let curr;
                let parms = {
                    page: curr || 1,
                    rows: me.row,
                    sptm: me.searchMsg,
                    hw: $('#j_huowei option:selected').val() || '',
                    sktid: $('#j_sktid option:selected').val() || ''
                }
                let paths = '';
                if (me.item == 0) {
                    paths = me.cfg.api + '/PosMxlsController/selectMxLs';
                    me.title = "当日交易流水";
                    me.urls = me.cfg.api + '/PosMxlsController/selectMxLsDY';
                }
                if (me.item == 1) {
                    paths = me.cfg.api + '/PosMxlsController/selectCFMxLs';
                    me.title = "处方类销售查询";
                    me.urls = me.cfg.api + '/PosMxlsController/selectCFMxLsDY';
                }
                if (me.item == 2) {
                    paths = me.cfg.api + '/PosMxlsController/selectHMLMxLs';
                    me.title = "含麻类销售查询";
                    me.urls = me.cfg.api + '/PosMxlsController/selectHMLMxLsDY';
                }

                $.ajax({
                    type: 'GET',
                    url: paths,
                    data: parms
                }).done(data => {
                    if (data.code == 200) {
                        if (data.data.mxls.length > 0) {
                            me.list = data.data.mxls;
                            me.summary = data.data.sum;
                            me.count = data.data.count;
                            laypage({
                                cont: 'pagenav9', //容器。值支持id名、原生dom对象，jquery对象,
                                pages: data.data.pagCount, //总页数
                                first: '第一页',
                                last: '最后一页',
                                curr: curr || 1, //当前页
                                jump: function(obj, first) { //触发分页后的回调
                                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                        me.initial(obj.curr);
                                    }
                                }
                            });
                        } else {
                            me.list = [];
                            for (let i in me.summary) {
                                me.$set(me.summary, i, '');
                            }
                            console.log(me.summary);
                        }
                    }
                })
            }
        },
        mounted() {
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            // me.yaopinm2 = "当前交易流水";

            let user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 14
            } else if (winHeight <= 800) {
                me.row = 16
            } else if (winHeight <= 863) {
                me.row = 20
            } else {
                me.row = 22
            }
            let res = {
                pageName: 'MXLS_SHOW',
                sktid: localStorage.getItem('sktId')
            }
            me.service.indexLsNew(me, res, data => {
                me.huowei = data.data.hwList;
                setTimeout(() => {
                    me.onTableList();
                }, 0);

            });
            me.service.selectSktidList(me, data => {
                me.sktid = data.data;
            })

            $(document).keydown(e => {
                let key = e.keyCode;
                if (key == 13) {
                    let me = this
                    me.onTableList();
                }
            })
        },
    }
</script>